<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:shro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>大成方略乐橙客户管理系统</title>
    <link rel="icon" href="favicon.ico" type="images/ico">
    <meta name="author" content="dc">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <!--轮播图-->
    <!--<link rel="stylesheet" href="/css/swiper-bundle.min.css"/>-->
    <!--对话框-->
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css">
    <!--时间选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"/>
    <!--日期选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css"/>
    <!-- 多选下拉 -->
    <link rel="stylesheet" href="/css/bootstrap-multiselect.css" type="text/css"/>
    <link rel="stylesheet" href="/css/bootstrap-select.css" type="text/css"/>
    <link rel="stylesheet" href="/css/swiper/swiper.min.css"/>
    <link rel="stylesheet" href="/css/skin.css"/>
    <link rel="stylesheet" href="/css/user-main.css"/>
</head>

<body class="main-body">
<div class="container-fluid">
    <div class="row top-action">
        <div class="col-xs-7">
            <h3><img src="/images/icon-home-1.png" alt="">销售简报</h3>
        </div>
        <div class="col-xs-5">
            <label class="pull-right time-action">
                <i class="mdi mdi-calendar-range"></i>
                <input type="text" class="form-control" id="dateYear">
            </label>
        </div>
    </div>
    <div class="overview">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <span>新增会员 <i class="mdi mdi-arrow-up-bold"></i></span>
                    <strong class="data-change" id="newMember"></strong>
                </div>
                <div class="swiper-slide">
                    <span>新增联系人 <i class="mdi mdi-arrow-up-bold"></i></span>
                    <strong class="data-change" id="newContacts"></strong>
                </div>
                <div class="swiper-slide">
                    <span>新增跟进 <i class="mdi mdi-arrow-up-bold"></i></span>
                    <strong class="data-change" id="newFollow"></strong>
                </div>
                <div class="swiper-slide">
                    <span>新增订单 <i class="mdi mdi-arrow-up-bold"></i></span>
                    <strong class="data-change" id="newOrder"></strong>
                </div>
                <div class="swiper-slide">
                    <span>新增商机 <i class="mdi mdi-arrow-up-bold"></i></span>
                    <strong class="data-change" id="newBusiness"></strong>
                </div>
                <div class="swiper-slide">
                    <span>新增业绩 <i class="mdi mdi-arrow-up-bold"></i></span>
                    <strong class="data-change" id="newPerformance"></strong>
                </div>
            </div>
        </div>
        <div class="swiper-button-next"><span class="mdi mdi-chevron-right"></span></div>
        <div class="swiper-button-prev"><span class="mdi mdi-chevron-left"></span></div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="card box-new-card" style="height: 500px;">
                <div class="card-header">
                    <h4><img src="/images/icon-home-2.png" alt="">系统公告</h4>
                    <div class="card-actions">
                        <div class="searchs pull-left">
                            <input type="text" id="searchInfo" placeholder="请输入公告名称" autocomplete="off" class="s-input">
                            <!--                            <i class="mdi mdi-magnify"></i>-->
                            <button onClick="announcementTableInit()" type="button" class="s-button"><img src="/images/l-search.png" alt=""></button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <table id="announcement_list"></table>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="card box-new-card" style="height: 500px;">
                <div class="card-header">
                    <h4><img src="/images/icon-home-5.png" alt="">个人业绩走势</h4>
                </div>
                <div class="card-body p-0" style="width: 100%;height: 440px">
                    <div id="e-line" style="width: 100%;height: 440px"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="card box-new-card" style="height: 500px;">
                <div class="card-header">
                    <h4><img src="/images/icon-home-4.png" alt="">消息提醒</h4>
                </div>
                <div class="card-body message-card">
                    <table id="messageTable"></table>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="card box-new-card" style="height: 500px;">
                <div class="card-header">
                    <h4><img src="/images/icon-home-6.png" alt="">排行榜单</h4>
                    <div class="card-actions my-ranking"><a href="#!">我的业绩排行</a>：<span>No.<span id="myRank"></span></span></div>
                </div>
                <div class="card-body">
                    <div class="rank-action clearfix">
                        <div class="rank-tab pull-left" id="rankTabs">
                            <input type="text" value="0" id="rankTabActive" hidden>
                            <span class="p-judg y-pointer p-active" data-tabs="0">业绩排行</span>
                            <span class="c-judg y-pointer" data-tabs="1">产品排行</span>
                        </div>
                        <div class="pull-right rank-datas">
                            <div class="input-group" style="width: 160px; float: left">
                                <input type="text" id="statisticsYear" class="form-control" style="width: 80px;">
                                <span class="input-group-addon">年</span>
                                <input type="text" id="statisticsMonth" class="form-control" style="width: 60px;" disabled>
                                <span class="input-group-addon">月</span>
                            </div>
                            <label class="lyear-radio radio-primary rank-all-data"><input type="radio" id="rankAllData" checked><span>全部</span></label>
                        </div>
                    </div>
                    <div class="l-wrap rank-body"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="card box-new-card m-b-0" style="height: auto">
        <div class="card-header">
            <h4><img src="/images/icon-home-6.png" alt="">销售明星榜</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-xs-6 star-box">
                    <div class="star-header">
                        <img src="/images/star-top3.png" alt="">
                        <div class="action pull-right">
                            <label><i class="mdi mdi-calendar-range"></i><input type="text" class="form-control" id="starDateYear"></label>
                        </div>
                    </div>
                    <div class="star-list clearfix">
                        <input type="text" id="userId" hidden>
                        <div class="star-ranking star-no2" id="starTop2">
                            <input type="text" id="secondId" hidden>
                            <div>
                                <img src="/images/star-rank-2.png" alt="">
                                <h4></h4>
                                <div class="box">
                                    <div class="avatar"><div></div></div>
                                    <a href="#!" data-toggle="tooltip" data-placement="top" data-original-title="上传头像" class="btn-avatar"><i class="mdi mdi-camera"></i></a>
                                </div>
                            </div>
                            <ul class="clearfix">
                                <li>
                                    <span class="action-1">0</span>
                                    <button type="button" class="btn btn-xs btn-round btn-info" onclick="starAction(this, 1);"><i></i>点赞</button>
                                </li>
                                <li>
                                    <span class="action-2">0</span>
                                    <button type="button" class="btn btn-xs btn-round btn-danger" onclick="starAction(this, 2);"><i></i>送花</button>
                                </li>
                                <li>
                                    <span class="action-3">0</span>
                                    <button type="button" class="btn btn-xs btn-round btn-secondary" data-toggle="modal" data-target="#messageModal">留言</button>
                                </li>
                            </ul>
                        </div>
                        <div class="star-ranking star-no1" id="starTop1">
                            <input type="text" id="firstId" hidden>
                            <div>
                                <img src="/images/star-rank-1.png" alt="">
                                <h4></h4>
                                <div class="box">
                                    <div class="avatar"><div></div></div>
                                    <a href="#!" data-toggle="tooltip" data-placement="top" data-original-title="上传头像" class="btn-avatar"><i class="mdi mdi-camera"></i></a>
                                </div>
                            </div>
                            <ul class="clearfix">
                                <li>
                                    <span class="action-1">0</span>
                                    <button type="button" class="btn btn-xs btn-round btn-info" onclick="starAction(this, 1);"><i></i>点赞</button>
                                </li>
                                <li>
                                    <span class="action-2">0</span>
                                    <button type="button" class="btn btn-xs btn-round btn-danger" onclick="starAction(this, 2);"><i></i>送花</button>
                                </li>
                                <li>
                                    <span class="action-3">0</span>
                                    <button type="button" class="btn btn-xs btn-round btn-secondary" data-toggle="modal" data-target="#messageModal">留言</button>
                                </li>
                            </ul>
                        </div>
                        <div class="star-ranking star-no3" id="starTop3">
                            <input type="text" id="thirdId" hidden>
                            <div>
                                <img src="/images/star-rank-3.png" alt="">
                                <h4></h4>
                                <div class="box">
                                    <div class="avatar"><div></div></div>
                                    <a href="#!" data-toggle="tooltip" data-placement="top" data-original-title="上传头像" class="btn-avatar"><i class="mdi mdi-camera"></i></a>
                                </div>
                            </div>
                            <ul class="clearfix">
                                <li>
                                    <span class="action-1">0</span>
                                    <button type="button" class="btn btn-xs btn-round btn-info" onclick="starAction(this, 1);"><i></i>点赞</button>
                                </li>
                                <li>
                                    <span class="action-2">0</span>
                                    <button type="button" class="btn btn-xs btn-round btn-danger" onclick="starAction(this, 2);"><i></i>送花</button>
                                </li>
                                <li>
                                    <span class="action-3">0</span>
                                    <button type="button" class="btn btn-xs btn-round btn-secondary" data-toggle="modal" data-target="#messageModal">留言</button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 message-box">
                    <div class="message-header"><img src="/images/message-title.png" alt=""></div>
                    <div class="message-list" id="messageList">
                        <!--<div class="message-list-item">
                            <div class="message-avatar"></div>
                            <div>
                                <h5>中国建筑-猫小艺<span>2017-08-22</span></h5>
                                <p><span>#张哲瀚#</span>快递不是一般的慢，演唱会结束了第二天才收到票，服务态度不错给退票了。</p>
                            </div>
                        </div>-->
                    </div>
                    <button type="button" class="more-message" id="moreMessage">更多</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 修改头像 -->
<div class="modal fade" id="editHeadModal" tabindex="-1" role="dialog" aria-labelledby="editHeadModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="topEdit">
                <div class="img-box" id="">
                    <img src="/images/head-neutral.png" id="newsPic">
                    <div id="imageId" style="display: none"></div>
                </div>
                <label for="files">
                    <span class="btn btn-default btn-label"><label><i class="mdi mdi-upload"></i></label>上传图片</span>
                    <input type="file" id="files" onchange="getNewsPicUpload(this)" class="hide">
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="uploadAvatar();" data-dismiss="modal">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 留言 -->
<div class="modal fade" data-backdrop="static" aria-hidden="true" role="dialog" id="messageModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">留言<span></span></h4>
            </div>
            <div class="modal-body">
                <input type="text" value="" id="supportedAccountId" hidden>
                <input type="text" value="" id="supportedUserName" hidden>
                <input type="text" value="" id="rankId" hidden>
                <form>
                    <textarea rows="5" class="form-control" id="messageContent" placeholder="请输入留言内容，不超过200字。"></textarea>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="starAction(this, 3);">提交</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!--行内编辑插件-->
<!--<link href="/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript" src="/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>-->
<!--以下是tree-grid的使用示例-->
<link href="/js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery-treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
<!--滚动新闻-->
<script type="text/javascript" src="/js/jquery-super-slide/jquery.SuperSlide.2.1.3.js"></script>
<!--轮播图-->
<script type="text/javascript" src="/js/swiper-bundle.min.js"></script>
<!-- 分页 -->
<script src="/js/jquery.pagination.js"></script>
<!--对话框-->
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<!-- 多选框下拉 -->
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/js/bootstrap-select.js"></script>
<script type="text/javascript" src="/js/swiper/swiper.min.js"></script>
<!--日期选择插件-->
<script src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- 图表 -->
<script type="text/javascript" src="/js/echarts.min.js"></script>
<!-- 图片懒加载 -->
<script type="text/javascript" src="/js/jquery.lazyload.min.js"></script>
<script src="/js/crm/main/user.main.js"></script>
<script>
    $(document).ready(function () {
        // 处理页面有滚动条时，页面右侧边距缩窄
        if (window.innerWidth !== $(document).width()) {
            $('.container-fluid').addClass('p-scroll');
        }
        // 模态框显示时模糊背景
        $('.modal').on('show.bs.modal', function (e) {
            $('.container-fluid').addClass('modal-blur');
        }).on('hidden.bs.modal', function (e) {
            $('.container-fluid').removeClass('modal-blur');
        })
    })
</script>
</body>
</html>
